<template>
    <div v-loading="loading" class="Main">
        <div class="w1440">
            <div class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="Personal">
                        <div class="PersonalTop mb15">
                            <div class="img imgbox">
                                <span><img src="../assets/uploadfiles/image/person1.jpg" alt=""></span>
                            </div>
                           
                            <div class="txt">
                                <div class="touxiang">
                                    <div class="imgbox">
                                        <span><img :src="userInfo.avatar" alt=""></span>
                                    </div>
                                    <div class="text">
                                        <div class="name">{{userInfo.username}}</div>
                                        <div class="dec">{{userInfo.intro}}</div>
                                    </div>
                                </div>
                                <div class="per_num">
                                    <ul>
                                        <li>
                                            <div class="num">{{userInfo.postNum}}</div>
                                            <div class="text">帖子</div>
                                        </li>
                                        <li>
                                            <div class="num">{{userInfo.follow}}</div>
                                            <div class="text">关注</div>
                                        </li>
                                        <li>
                                            <div class="num">{{userInfo.fans}}</div>
                                            <div class="text">粉丝</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="per_btn" v-if="routeHasQuery !== userInfo.uid">
                                    <span class="s1" @click="followUser(userInfo)">{{userInfo.isFollow ? '取消关注' : '+ 关注'}}</span>
                                    <!-- <span class="s2">加好友</span> -->
                                </div>
                            </div>
                        </div>

                        <div class="PersonPage mb15 bgwhite">
                            <div class="PersonTit"><span>主页</span></div>
                            <div class="HomeTit HomeTit_per">
                                <div class="tit">TA的信息</div>
                            </div>
                            <div :class="['tag', {grey: !userInfo.vip}]"><img src="../assets/images/page_vip.png" alt="">{{userInfo.vip ? '云南三益文化国防基金会社区论坛官方账号' : '普通用户'}}</div>
                            <div class="con">
                                <ul>
                                    <li>
                                        <span>性别：</span>
                                        {{sexShow}}
                                    </li>
                                    <li>
                                        <span>IP属地：</span>
                                        {{userInfo.city}}
                                    </li>
                                    <li>
                                        <span>个性签名：</span>
                                        {{userInfo.intro}}
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="MineHonor mb15 bgwhite">
                            <div class="HomeTit HomeTit_per">
                                <div class="tit">TA的荣誉</div>
                                <!-- <a href="" class="more">更多</a> -->
                            </div>
                            <div v-if="myCertificateList.length" class="MineHonorBox pr">
                                <ul :style="{width: myCertificateList.length * 336 + 'px'}">
                                    <li v-for="(item, index) in myCertificateList" :ket="index">
                                        <a class="d-block pointer" @click="handlePictureCardPreview(item.imagePath)">
                                            <div class="img imgbox">
                                                <span><img :src="item.imagePath" alt=""></span>
                                            </div>
                                            <div class="txt">
                                                <div class="tit">{{ item.name }}</div>
                                                <div class="more"><img src="../assets/images/jt.png" class="img1"
                                                        alt=""><img src="../assets/images/jtc.png" class="img2" alt="">
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div v-show="certificateIndex > 0" @click="changeHonor('prev')" class="prev-btn d-flex a-center j-center handle-btn pointer"><el-icon><ArrowLeft /></el-icon></div>
                                <div v-show="certificateIndex < myCertificateList.length-3"  @click="changeHonor('next')" class="next-btn d-flex a-center j-center handle-btn pointer"><el-icon><ArrowRight /></el-icon></div>
                            </div>
                            <el-empty v-else :image-size="100" />
                        </div>

                        <div class="MineTiezi bgwhite">
                            <div class="HomeTit HomeTit_per">
                                <div class="tit">TA的帖子</div>
                            </div>
                            <div v-if="myPostList.length" class="MineTieziBox-content">
                                <div class="MineTieziBox">
                                    <ul>
                                        <li v-for="(item, index) in myPostList" :key="index">
                                            <router-link :to="'/commentpost?id=' + item.id" tag="a">
                                                <!-- <div v-if="item." class="img imgbox">
                                                    <span><img src="../assets/uploadfiles/image/tx.jpg" alt=""></span>
                                                </div> -->
                                                <div class="txt">
                                                    <div class="tit dot">{{item.title}}</div>
                                                    <div class="dec" v-html="clearSpaceStr(item.contentBrief)"></div>
                                                </div>
                                                <div class="other">
                                                    <p>{{item.readCount}}圈友</p>
                                                    <p>{{item.commentCount}}动态</p>
                                                </div>
                                            </router-link>
                                        </li>
                                    </ul>
                                </div>
                                <!-- 分页 -->
                                <div class="pager d-flex j-center">
                                    <el-pagination
                                    v-model:current-page="someonePrames.pageNo"
                                    v-model:page-size="someonePrames.pageSize"
                                    background
                                    layout="prev, pager, next, jumper"
                                    :total="someonePrames.total"
                                    />
                                </div>
                            </div>
                            
                            <el-empty v-else :image-size="100" />
                        </div>



                    </div>


                </div>
                <div class="MainLeftRight  w26">
                    <!-- 排行帖子 -->
                    <SortPost />
                    <!-- 热门帖子 -->
                    <HotPost />
                    <!-- 热门博主 -->
                    <HotBlogger ref="hotBlogger" @updateUserInfo="getUserInfoByUid" />
                </div>
            </div>
        </div>
        <!-- 查看大图 -->
        <div class="view-maxImage">
            <el-dialog v-model="dialogVisible" center>
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
    </div>
</template>

<script setup name="OtherInfo">
import { userApi, postApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, onMounted, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { ElMessage, ElNotification } from 'element-plus';
import { useCommonStore } from '@/store/Common';

// 路由
const router = useRouter();

// 路由是否传参， 如果传参则是查看其他用户信息， 否则是查看自己的信息
const routeHasQuery = computed(() => {
    return router.currentRoute.value.query.uid;
})

// 组件
import HotBlogger from '@/components/HotBlogger.vue'; // // 热门博主
import HotPost from '@/components/HotPost.vue'; // 热门帖子
import SortPost from '@/components/SortPost.vue'; // 排行帖子

 /**
 * @name 计算属性
 */
// 去除空格
const clearSpaceStr = computed(() => {
    return (str) => {
        if(!str) return '';
        let newStr = str.replace(/&nbsp;\s*/g, ' ');
        return newStr.replace(/\s*/g,''); // 去除所有空格，包括换行、回车、制表符
    }
})

// 页面数据
const userInfo = ref({});
const loading = ref(true); // 加载中

// 公共store
const commonStore = useCommonStore();
const {userInfoCommon} = storeToRefs(commonStore);

/**
 * @name 个人信息
 */
const getUserInfoByUid = () => {
    let uid = router.currentRoute.value.query.uid;
    userApi.getUserInfoByUid({uid}).then((res) => {
        userInfo.value = res.result;
    }).catch(err => {});
}

/**
 * @name 关注用户
 */
const hotBlogger = ref(null);

const followUser = (item) => {
    if(item.isFollow) {
        // 取消关注
        userApi.followCancel({id: item.uid}).then((res) => {
            item.isFollow = false;
            ElNotification({
                title: '提示',
                message: '已取消关注',
                type: 'success',
            })
            if(hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            userInfo.value.fans = userInfo.value.fans - 1; // 减少粉丝数
        }).catch(err => {});
    }else{
        // 关注用户
        userApi.followAdd({id: item.uid}).then((res) => {
            item.isFollow = true;
            ElNotification({
                title: '提示',
                message: '已关注',
                type: 'success',
            })
            if(hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            userInfo.value.fans = userInfo.value.fans + 1; // 增加粉丝数
        }).catch(err => {});
    }
}

/**
 * @name TA的帖子
 */
const myPostList = ref([]);
const someonePrames = reactive({
    pageNo: 1,
    pageSize: 6,
    uid: '',
    total: 0
})
const getSomeoneList = () => {
    loading.value = true;
    someonePrames.uid = router.currentRoute.value.query.uid;
    postApi.getSomeoneList(someonePrames).then((res) => {
        myPostList.value = res.result.list;
        someonePrames.total = Number(res.result.total);
    }).catch((err) => { }).finally(() => {
        loading.value = false;
    })
}

// 生命周期
onBeforeMount(() => {
    getUserInfoByUid()
    getSomeoneList()      
    getCertificateListByUid()                       
})
onMounted(() => {
    certificateIndexChange()
})

// 计算属性
const sexShow = computed(() => {
    let gender = userInfo.value.gender;
    let genderText = '';
    if(gender == 0) {
        genderText = '保密';
    }else if(gender == 1) {
        genderText = '男';
    }else{
        genderText = '女';
    }
    return genderText;
})

/**
 * @name 点击图片查看大图
 */
 const dialogVisible = ref(false); // 大图弹窗
const dialogImageUrl = ref(''); // 大图地址
function handlePictureCardPreview(image) {
    dialogImageUrl.value = image; // 存储图片地址
    dialogVisible.value = true; // 显示大图弹窗
}

/**
 * @name 我的证书切换
 */
const certificateIndex = ref(0); // 我的证书切换
const certificateIndexChange = () => {
    let ulAnimate = document.querySelector('.MineHonorBox ul');
    if(!ulAnimate) return;
    ulAnimate.style.transform = `translateX(-${certificateIndex.value * 336}px)`;
}
/**
 * @name TA的证书
 */
const myCertificateList = ref([]); // 我的证书列表
const certificateParam = reactive({
    pageNo: 1,
    pageSize: 99,
    userId: ''
})
const getCertificateListByUid = () => {
    certificateParam.userId = router.currentRoute.value.query.uid;
    userApi.getCertificateListByUid(certificateParam).then((res) => {
        myCertificateList.value = res.data.list;
    }).catch(err => {});
}
const changeHonor = (type) => {
    if(type == 'prev') {
        certificateIndex.value--;
    }else{
        certificateIndex.value++;
    }
    certificateIndexChange();
}

/**
 * @name 更新当前页面
 */
const updatePage = () => {
    getUserInfoByUid()
    getSomeoneList()  
}

// 监听查询参数变化
watch(() => router.currentRoute.value.query, () => {
    updatePage();
})
// 监听查询参数变化
watch(() => someonePrames.pageNo, () => {
    getSomeoneList();
})

</script>


<style lang="less" scoped>
    .MineHonorBox{
        overflow: hidden;
        .handle-btn{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(0,0,0,0.4);
            color: #fff;
            z-index: 5;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            display: none;
        }
        .prev-btn{
            left: 10px;
        }
       .next-btn{
            right: 10px;
        }
        &:hover{
            .handle-btn{
                display: flex;
            }
        }
    }
</style>